﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/shop_head.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
		}
		
		body {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			max-width: 100%;
			min-width: 1000px;
			background-image: url(img/shop/shop_body_list_head.png);
		}
		
		#product_body {
			width: 1000px;
			margin: 0px auto;
			margin-top: 10px;
			background-color: #FFFFFF;
		}
		
		#product_top {
			width: 100%;
			overflow: hidden;
		}
		
		#product_top_left {
			float: left;
			width: 350px;
		}
		
		#product_top_bigimg {
			width: 100%;
		}
		
		#product_top_bigimg>img {
			width: 100%;
		}
		
		#product_top_smallimg>ul {
			margin: 10px 0px;
			overflow: hidden;
			width: 100%;
			list-style-type: none;
		}
		
		#product_top_smallimg>ul>li {
			float: left;
			width: 50px;
			height: 63px;
			margin-left: 16px;
		}
		
		#product_top_smallimg>ul>li>img {
			cursor: pointer;
			width: 100%;
		}
		
		#product_top_smallimg>ul>:first-child {
			border: 2px solid #E53E41;
		}
		
		#product_top_right {
			width: 630px;
			float: right;
		}
		
		#product_top_right>div {
			margin-bottom: 15px;
		}
		
		#product_top_right_name {
			margin-top: 10px;
			width: 100%;
			font-family: "微软雅黑";
		}
		
		#product_top_right_name>p {
			width: 100%;
			font-size: 20px;
			font-weight: bold;
		}
		
		#product_top_right_name>span {
			font-size: 12px;
			color: #E53E41;
		}
		
		#product_top_right_price {
			font-family: "微软雅黑";
			font-size: 13px;
			width: 100%;
			height: 50px;
			line-height: 50px;
			background-color: #F3F3F3;
			text-indent: 10px;
		}
		
		#product_top_right_price>span {
			margin-left: 10px;
			font-size: 20px;
			font-weight: bold;
			color: #E53E41;
		}
		
		#product_top_right_map {
			font-family: "微软雅黑";
			font-size: 13px;
			text-indent: 10px;
			width: 100%;
			height: 50px;
			line-height: 50px;
		}
		
		#product_top_right_map>select {
			outline: none;
			cursor: pointer;
			margin-left: 10px;
		}
		
		#product_top_right_chima {
			font-family: "微软雅黑";
			font-size: 13px;
			text-indent: 10px;
			width: 100%;
			height: 50px;
			line-height: 50px;
		}
		
		#product_top_right_chima>div {
			float: left;
			height: 30px;
			line-height: 30px;
			margin-top: 10px;
		}
		
		#product_top_right_chima>div:last-child {
			margin-left: 10px;
		}
		
		#product_top_right_chima>div>div {
			text-indent: 0px;
			text-align: center;
			width: 40px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #CCCCCC;
			margin-right: 10px;
			float: left;
			cursor: pointer;
		}
		
		#product_top_right_chima>div>div:hover {
			border: 1px solid #E53E41;
		}
		
		#product_top_right_buy {
			font-family: "微软雅黑";
			font-size: 13px;
			text-indent: 10px;
			width: 100%;
			height: 50px;
			line-height: 50px;
		}
		
		#product_top_right_buy>div {
			float: left;
			overflow: hidden;
		}
		
		#product_num {
			border-top: 1px solid #CCCCCC;
			border-bottom: 1px solid #CCCCCC;
			width: 50px;
			height: 40px;
			margin-left: 10px;
			margin-top: 5px;
		}
		
		#product_num>input {
			font-family: "微软雅黑";
			font-size: 15px;
			width: 30px;
			height: 40px;
			float: left;
			text-indent: 5px;
			outline: none;
			border: none;
			border-left: 1px solid #CCCCCC;
		}
		
		#product_num>div {
			cursor: pointer;
			text-indent: 0px;
			text-align: center;
			border-left: 1px solid #CCCCCC;
			border-right: 1px solid #CCCCCC;
			border-bottom: 1px solid #CCCCCC;
			width: 20px;
			height: 20px;
			line-height: 15px;
			float: left;
		}
		
		#product_buy {
			cursor: pointer;
			width: 120px;
			height: 40px;
			line-height: 40px;
			margin-top: 5px;
			margin-left: 20px;
			text-indent: 0px;
			color: white;
			font-family: "微软雅黑";
			font-size: 15px;
			font-weight: bold;
			text-align: center;
			border: 1px solid;
			background-color: #E53E41;
		}
		
		#product_smallbg {
			width: 100%;
			height: 200px;
		}
		
		#product_smallbg>img {
			width: 200px;
			float: right;
			margin-right: 20px;
		}
		
		#product_ts {
			font-family: "微软雅黑";
			font-size: 12px;
			text-indent: 10px;
			color: gray;
		}
		
		#product_bottom {
			overflow: hidden;
			width: 100%;
		}
		
		#shoplist_list_fenlei {
			float: left;
			background-color: #F9F9F9;
			width: 180px;
			border: 1px solid #CCCCCC;
			margin-top: 10px;
			border-radius: 3px;
			overflow: hidden;
		}
		
		#shoplist_list_fenlei>div {
			width: 100%;
			height: 30px;
			line-height: 30px;
			color: #FFFFFF;
			font-family: "微软雅黑";
			text-indent: 1em;
			background-color: #721F44;
		}
		
		#shoplist_list_fenlei>a {
			display: block;
			width: 100%;
			border-bottom: 1px solid #CCCCCC;
			overflow: hidden;
		}
		
		#shoplist_list_fenlei>a>img {
                        border:none;
			cursor: pointer;
			margin-left: 27px;
			margin-bottom: 10px;
		}
		
		#product_bottom_right {
			width: 800px;
			float: right;
			margin-top: 10px;
		}
		
		#product_bottom_right_head {
			border-radius: 3px 3px 0px 0px;
			height: 40px;
			width: 100%;
			background-color: #DCDCDC;
			border-bottom: 1px solid #E53E41;
		}
		
		#product_bottom_right_head>div {
			border-radius: 3px 3px 0px 0px;
			color: white;
			font-family: "微软雅黑";
			font-size: 20px;
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-color: #E53E41;
		}
		
		#product_bottom_right_info {
			padding: 0px 30px;
			margin-top: 20px;
			width: 100%;
			font-family: "微软雅黑";
			font-size: 13px;
			border-bottom: 1px solid #CCCCCC;
		}
		
		#product_bottom_right_info>div:last-child {
			width: 100%;
			margin-top: 10px;
		}
		
		#product_bottom_right_info>div:last-child>p {
			display: block;
			width: 100%;
			overflow: hidden;
		}
		
		#product_bottom_right_info>div:last-child>p>span {
			float: left;
			display: block;
			width: 33.33%;
			height: 30px;
			line-height: 30px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		#product_bottom_right_infoimg{
			width: 100%;
		}
		#product_bottom_right_infoimg>img{
			width: 100%;
			display: block;
		}
		#product_foot {
			margin-top: 10px;
			max-width: 100%;
			min-width: 1000px;
		}
		
		#product_foot>img {
			width: 100%;
		}
	</style>

	<body>
		<div id="shop_head">
			<div id="base_top_bg">
			<div class="base_top_navDiv">
				<div class="base_top_logo" onclick="location.href='index.html'"></div>
				<ul class="base_top_nav">
					<li class="w42" id="index_dl" onclick="location.href='login.html'">登录</li>
					<li class="w40" onclick="location.href='register.html'"></li>
					<li class="w40" onclick="location.href='shop.html'"></li>
					<li class="w56" onclick="location.href='cart.html'">购物车</li>
					<li></li>
					<li class="w40"></li>
					<li class="w40"></li>
					<li class="w40"></li>
				</ul>
				<img class="base_weixin" src="img/index/index_weixin1.png" />
				<img class="base_weibo" src="img/index/index_weibo1.png" />
				<img class="base_weitao" src="img/index/index_weitao1.png" />
			</div>
		</div>
		<ul id="base_leftAdd_content">
			<li>
				<a href="news.html">资讯</a>
			</li>
			<li>
				<a href="join.html">加盟</a>
			</li>
			<li>
				<a href="job.html">纳贤</a>
			</li>
			<li>
				<a href="woker.html">匠人</a>
			</li>
			<li>
				<a href="cooperation.html">合作</a>
			</li>
			<li>
				<a href="actor.html">选角</a>
			</li>
			<li>
				<a href="media.html">媒体</a>
			</li>
		</ul>
		<div id="base_leftAdd">
			<span></span>
		</div>
		<!--模拟客服开始-->
		<div id="top"></div>
		<div id="main">
			 <span id="base_guanbi"></span>
			<div id="txt">花笙记客服代表</div>
			<div id="show">
				<span class="show_span">很高兴为您服务！</span>
			</div>
			<input type="text" name="text" id="text" value="" />
			<input type="button" style="cursor: pointer;" id="send" value="发送" />
		</div>
		<!--模拟客服结束-->
		</div>
		<div id="shop_nav">
			<div id="shop_nav_icon">
				<ul id="img_icon">
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
				</ul>
				<ul id="font_icon">
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list2">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list2">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div id="product_body">
			<div id="product_top">
				<div id="product_top_left">
					<div id="product_top_bigimg">
						<img src="//img13.360buyimg.com/n1/s350x449_jfs/t3730/354/2023802200/400978/998181d0/583af840N94dcfcbb.jpg!cc_350x449.jpg" />
					</div>
					<div id="product_top_smallimg">
						<ul>
							<li>
								<img src="//img13.360buyimg.com/n1/s350x449_jfs/t3730/354/2023802200/400978/998181d0/583af840N94dcfcbb.jpg!cc_350x449.jpg" />
							</li>
							<li>
								<img src="//img13.360buyimg.com/n1/s350x449_jfs/t3433/303/1985005722/396880/a57e67ba/583af850N3f593dcc.jpg!cc_350x449.jpg" />
							</li>
							<li>
								<img src="//img13.360buyimg.com/n1/s350x449_jfs/t3373/112/2007819538/380915/1678419d/583af868N1362c695.jpg!cc_350x449.jpg" />
							</li>
							<li>
								<img src="//img13.360buyimg.com/n1/s350x449_jfs/t3676/285/1971343465/366364/9331ca24/583af865Ne751f4f0.jpg!cc_350x449.jpg" />
							</li>
							<li>
								<img src="//img13.360buyimg.com/n1/s350x449_jfs/t3568/287/2012510673/416696/3b9de3b4/583af863N3e78784d.jpg!cc_350x449.jpg" />
							</li>
						</ul>
					</div>
				</div>
				<div id="product_top_right">
					<div id="product_top_right_name">
						<p>花笙记民族复古中国风新版防水宽松唐装冬季新品 女款 黑色</p>
						<span>高品质 中国风 原创源</span>
					</div>
					<div id="product_top_right_price">
						银&nbsp;&nbsp;&nbsp;两<span>￥1099.00</span>
					</div>
					<div id="product_top_right_map">
						配送至
						<select id="sheng">
							<option>请选择</option>
						</select>省
						<select id="shi">
							<option>请选择</option>
						</select>市
						<select id="qu">
							<option>请选择</option>
						</select>区
					</div>
					<div id="product_top_right_chima">
						<div>尺&nbsp;&nbsp;&nbsp;码</div>
						<div>
							<div>小(S)</div>
							<div>中(M)</div>
							<div>大(L)</div>
						</div>
					</div>
					<div id="product_top_right_buy">
						<div>数&nbsp;&nbsp;&nbsp;量</div>
						<div id="product_num">
							<input id="product_num_text" type="text" value="1" />
							<div id="product_num_jia">+</div>
							<div id="product_num_jian">-</div>
						</div>
						<div id="product_buy">
							加入购物车
						</div>
					</div>
					<div id="product_ts">
						温馨提示·支持7天无理由退货
					</div>
					<div id="product_smallbg">
						<img src="img/product/product_top_bg.png" />
					</div>
				</div>
			</div>
			<div id="product_bottom">
				<div id="shoplist_list_fenlei">
					<div>宝贝分类</div>
					<a href="shoplist.html"><img src="//gdp.alicdn.com/imgextra/i1/608273487/TB2RZnasXXXXXbgXpXXXXXXXXXX_!!608273487.jpg" /></a>
					<a href="shoplist.html"><img src="//gdp.alicdn.com/imgextra/i2/608273487/TB2VXy9sXXXXXbMXpXXXXXXXXXX_!!608273487.jpg" /></a>
					<a href="shoplist.html"><img src="//gdp.alicdn.com/imgextra/i2/608273487/TB2TRzPsXXXXXX2XXXXXXXXXXXX_!!608273487.jpg" /></a>
					<a href="shoplist.html"><img src="//gdp.alicdn.com/imgextra/i4/608273487/TB2S5fqsXXXXXcZXXXXXXXXXXXX_!!608273487.jpg" /></a>
					<a href="shoplist.html"><img src="//gdp.alicdn.com/imgextra/i3/608273487/TB2ebORsXXXXXXeXFXXXXXXXXXX_!!608273487.jpg" /></a>
					<a href="shoplist.html"><img src="//gdp.alicdn.com/imgextra/i4/608273487/TB2bvYosXXXXXXbXpXXXXXXXXXX_!!608273487.jpg" /></a>
					<a href="shoplist.html"><img src="//gdp.alicdn.com/imgextra/i2/608273487/TB2TZC_sXXXXXbwXpXXXXXXXXXX_!!608273487.jpg" /></a>
					<a href="shoplist.html"><img src="//gdp.alicdn.com/imgextra/i1/608273487/TB27oS.sXXXXXbXXpXXXXXXXXXX_!!608273487.jpg" /></a>
				</div>
				<div id="product_bottom_right">
					<div id="product_bottom_right_head">
						<div>商品介绍</div>
					</div>
					<div id="product_bottom_right_info">
						<div id="">
							品牌： 花笙记（HUSENJI）
						</div>
						<div id="">
							<p><span>商品名称：花笙记民族复古中国风新版防水宽松唐装冬季新品 女款 黑色 细(XS)</span><span>款式：唐装</span><span>上市时间：2016冬季</span></p>
							<p><span>商品编号：11037638964</span><span>厚度：适中</span><span>开衩：开衩唐装</span></p>
						</div>
					</div>
					<div id="product_bottom_right_infoimg">
                       <img src="img/product/product_info1.jpg"/>
                       <img src="img/product/product_info2.jpg"/>
                       <img src="img/product/product_info3.jpg"/>
                       <img src="img/product/product_info4.jpg"/>
                       <img src="img/product/product_info5.jpg"/>
                       <img src="img/product/product_info6.jpg"/>
                       <img src="img/product/product_info7.jpg"/>
					</div>
				</div>
			</div>
		</div>
		<div id="product_foot">
			<img src="//gdp.alicdn.com/imgextra/i1/608273487/TB2P_t7bFXXXXX4XpXXXXXXXXXX_!!608273487.jpg" />
		</div>
	</body>
	<script src="js/jquery1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/shop_head.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/citylist.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$("#product_top_smallimg>ul>li").each(function() {
			$(this).mouseover(function() {
				for(var i = 0; i < $("#product_top_smallimg>ul>li").length; i++) {
					$("#product_top_smallimg>ul>li").eq(i).css("border", "none");
				}
				$(this).css("border", "2px solid #E53E41");
				var smallimg = $(this).children().attr("src");
				$("#product_top_bigimg>img").attr("src", "" + smallimg + "");
			})
		})
		$("#product_top_right_chima :last-child>div").each(function() {
			$(this).click(function() {
				for(var i = 0; i < $("#product_top_right_chima :last-child>div").length; i++) {
					$("#product_top_right_chima :last-child>div").eq(i).css("border", "1px solid #cccccc");
				}
				$(this).css("border", "1px solid #E53E41")
			})
		})
		//		<input id="product_num_text" type="text" value="1" />
		//							<div id="product_num_jia">+</div>
		//							<div id="product_num_jian">-</div>
		$("#product_num_jia").click(function() {
			var iptval = parseInt($("#product_num_text").val());
			iptval++;
			$("#product_num_text").val(iptval);
		})
		$("#product_num_jian").click(function() {
			var iptval = parseInt($("#product_num_text").val());
			if(iptval > 1) {
				iptval--;
				$("#product_num_text").val(iptval);
			}
		})
		//省市区联动
		var shengdata = citylist.citylist;
		for(var i = 0; i < shengdata.length; i++) {
			$("#sheng")[0].add(new Option(shengdata[i].p));
		}
		$("#sheng").change(function() {
			$("#shi").html("");
			$("#qu").html("");
			var shengindex = $(this)[0].selectedIndex;
			if(shengindex > 0) {
				$("#shi")[0].add(new Option("请选择"));
				$("#qu")[0].add(new Option("请选择"));
				for(var i = 0; i < shengdata[shengindex - 1].c.length; i++) {
					$("#shi")[0].add(new Option(shengdata[shengindex - 1].c[i].n));
				}
			} else {
				$("#shi")[0].add(new Option("请选择"));
				$("#qu")[0].add(new Option("请选择"));
			}
		})
		$("#shi").change(function() {
			$("#qu").html("");
			var shiindex = $(this)[0].selectedIndex;
			if(shiindex > 0) {
				var index1 = $("#sheng")[0].selectedIndex;
				var index2 = $("#shi")[0].selectedIndex;
				var qu1 = shengdata[index1 - 1].c[index2 - 1];
				var qu2 = shengdata[index1 - 1].c;
				if(qu1.a) {
					for(var m in qu1.a) {
						$("#qu")[0].add(new Option(qu1.a[m].s));
					}
				} else {
					for(var l in qu2) {
						$("#qu")[0].add(new Option(qu2[l].n));
					}
				}
			} else {
				$("#qu")[0].add(new Option("请选择"));
			}
		})
	</script>

</html>